<template>
  <div>
    <el-form ref="retrievalForm" :model="retrievalForm" label-width="60px" class="retrieval-box">
      <h3 class="retrieval-title">找回密码</h3>

      <el-form-item label="账号" prop="user">
        <el-input type="text" placeholder="请输入账号" v-model="retrievalForm.user"/>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input type="text" placeholder="请输入账号邮箱" v-model="retrievalForm.email"/>
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-input type="text" placeholder="请输入收到的验证码" v-model="retrievalForm.code"/>
      </el-form-item>

      <el-form-item>
        <el-space wrap :size="30">
          <el-button type="primary" v-on:click="onSubmit()" v-bind:disabled="obj.dis">
            <span v-if="obj.show">发送验证码</span>
            <span v-else>重新发送{{ obj.count }}s</span>
          </el-button>
          <el-button type="primary" v-on:click="onConfirm()">确定</el-button>
          <el-button type="warning" v-on:click="onReturn()">返回</el-button>
        </el-space>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import request from "@/util/request";
import router from "@/router";
import {ElMessage} from "element-plus";

export default {
  name: "Retrieval",
  data() {
    return {
      backgroundImage: 'url(' + require('../assets/login.jpg') + ')',
      retrievalForm: {
        user: this.$cookies.get("user"),
        email: this.$cookies.get("email"),
        code: ''//与用户所填验证码绑定
      },
      obj: {
        dis: false,
        show: true,
        timer: null,
        count: ""
      },
      uCode: '',//此页面生成的验证码
    }
  },
  methods: {
    onSubmit() {
      //正则验证邮箱
      //验证成功 -> 生成四位验证码 -> 发送邮箱和验证码到后端 -> 进入60秒发送倒计时
      let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      // console.log(uCode)
      if (this.retrievalForm.username === '') {
        ElMessage.error('请先输入账号')
      } else if (!reg.test(this.retrievalForm.email)) {
        //验证失败 -> 提示邮箱输入有误
        ElMessage.error('邮箱格式有误')
      } else {
        //生成四位验证码
        this.uCode = Math.floor(Math.random() * (9999 - 1000)) + 1000;
        //url未填充
        request.post('http://localhost:8090/user/sendUserEmail', {
          email: this.retrievalForm.email,
          code: this.uCode.toString()
        }).then(response => {
          if (response.data.code === '200') {
            ElMessage({
              message: '发送成功',
              type: 'success'
            })
          } else {
            ElMessage.error('发送失败')
          }
        })
        let mins = 60//倒计时时间 单位s
        if (!this.obj.timer) {
          this.obj.count = mins;
          this.obj.show = false;
          this.obj.dis = true;
          this.obj.timer = setInterval(() => {
            if (this.obj.count > 0 && this.obj.count <= mins) {
              this.obj.count--;
            } else {
              this.obj.dis = false;
              this.obj.show = true;
              clearInterval(this.obj.timer);
              this.obj.timer = null;
            }
          }, 1000);
        }
      }
    },
    onConfirm() {
      //如果没有获取验证码 弹窗提示
      if (this.uCode === '') {
        confirm("请先获取验证码")
      }
      //如果验证码不正确 弹窗提示
      //如果正确 跳转页面
      if (this.retrievalForm.code.toString() === this.uCode.toString()) {
        ElMessage({
          showClose: true,
          message: '验证成功',
          type: 'success'
        })
        //保存信息到cookie中 -> 跳转到更改密码页面
        //如果cookie下该值已存在 则将其删除
        if (this.$cookies.isKey("user")) {
          this.$cookies.remove("user");
        }
        this.$cookies.set("user", this.retrievalForm.user);
        if (this.$cookies.isKey("email")) {
          this.$cookies.remove("email");
        }
        this.$cookies.set("email", this.retrievalForm.email);
        router.push("/changepass")
      } else {
        ElMessage.error('验证失败')
      }
    },
    onReturn() {
      router.push('/')
    },
  }
}
</script>

<style scoped>
.retrieval-box {
  border: 1px solid #DCDFE6;
  width: 400px;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 0 25px black;
  background-color: white;
}
.retrieval-title {
  text-align: center;
  margin: 0 auto 30px auto;
  color: #303133;
}
/*背景没加*/
.bgi {
  width: 100%;
  height: 100%;
}
</style>